<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
</head>
<style>
    /* @media 可以针对不同的屏幕尺寸来设置不同的样式 */
    /* @media 开头
    mediatype 媒体类型
        all 所有设备
        print 打印机和打印预览
        screen 用于电脑 平板 手机等屏幕
    关键字有: and:多个媒体特性连接到一起, not:排除某个媒体特性, only:指定某个特定的媒体特性(可以省略)
    media feature 媒体特性 必须有小括号包含
        width
        max-width
        min-width */

    /* :在屏幕上并且最大的宽度是800像素 设置我们想要的样式 */
    /* max-width:800px是小于等于800像素 */
    @media screen and (max-width:800px) {
        body {
            background-color: palegoldenrod;
        }
    }

    @media screen and (max-width:500px) {
        body {
            background-color: salmon;
        }
    }

    @media screen and (min-width:800px) {
        body {
            background-color: blueviolet;
        }
    }
</style>

<body>

</body>

</html>